<template>
  <el-card>
    <el-button type="primary" @click="searchList()">查询</el-button>
    <el-table :data="tableData" stripe border style="margin-top: 20px">
      <el-table-column prop="origin_name" label="买包人">
      </el-table-column>
      <el-table-column prop="tuijian_name" label="推荐人">
      </el-table-column>
      <el-table-column prop="tuijian_per_bonus" label="返利金额">
      </el-table-column>
      <el-table-column prop="tuijian_start_time" label="返利开始时间">
      </el-table-column>
      <el-table-column prop="tuijian_expire_time" label="返利过期时间">
      </el-table-column>
      <el-table-column prop="_add_time_str" label="添加时间">
      </el-table-column>
      <el-table-column prop="tuijian_expire_time" label="状态">
        <template slot-scope="scope">
          {{scope.row.status == 2 ? '停止': '进行中'}}
        </template>
      </el-table-column>
     <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" type="danger" @click="handleStatus(scope.$index, scope.row)">{{scope.row == 1 ?'停止': '开启'}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        bonusSet: {
          name: '',
          first: '',
          second: '',
          relate_coupon_id: '',
          relate_coupon_name: ''
        },
        currentPage: 1,
        pageNum: 1,
        pageSize: 100,
        total: 0,
        isBonusSet: false,
        tableData: [],
        couponArr: []
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
 
      searchList() {
        this.pageNum = 1
        this.getList()
      },
      handleDelete(index, row) {
        vk.confirm('确定要删除该关系吗', '提示', '确定', '取消', res => {
          if (res.confirm) {
            this.orderDelete(row)
          }
        });
      },
      handleStatus(index, row) {
        let that = this
        vk.callFunction({
          url: 'user/kh/bonusRelatePost',
          data: {
            _id: row._id,
            status: row.status == 1 ? 2 : 1
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.getList()
            }
          }
        })
      },
      orderDelete(row) {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        vk.callFunction({
          url: 'user/kh/bonusRelateDelete',
          data: {
            _id: row._id
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.getList()
            }
          }
        })
      },
      getList() {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        let obj = {}
        if (this.name) {
          obj.name = this.name
        }
        vk.callFunction({
          url: 'user/kh/bonusRelateList',
          data: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            ...obj
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.tableData = res.rows
              this.total = res.total
            }
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__new-tab {
    margin-right: 12px !important
  }

  .width400 {
    width: 400px
  }

  .width200 {
    width: 200px
  }

  .width100 {
    width: 100px
  }

  .good {
    display: flex;
    align-items: center;
    margin-top: 10px;

    &-img {
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }

    &-name {
      margin-left: 10px;
    }

    &-price {
      color: #f56c6c;
      font-weight: 500;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
</style>